<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>上传头像</title>
<link rel="stylesheet" type="text/css" href="../resources/css/nav.css">
	<style type="text/css">
		body{
			background: #f5f5f5;

		}
		.wrap{
			width: 100%;
			height:100%;
		}

		.userinfo{
			background-color: #fff;
		    width: 800px;
		    margin: 10% auto;
		    position: relative;
		    min-height: 550px;
		}
		.userface{
			text-align: center;
		}
		.userface img{
			margin-top: 30px;
			width: 100px;
			height: 100px;
			border-radius: 100px;
		}
		#userinfoBox{
		    margin-top: 30px;
		    text-align: center;
		}
		#userinfoBox span{
			font-size: 18px;
		}
		.upload{
			margin-left: 140px;
		}
		#img{
			padding: 8px;
			height: 30px;
			font-size: 18px;
			width: 360px;
			margin-top: 20px;
		}
		#keep{
			margin-top: 20px;
			background-color: #3185e8;
			width: 380px;
			height: 45px;
			line-height: 45px;
			border:0;
			margin-left: 15px;
			font-size: 16px;
			cursor:pointer;
		}
		.backIndex{
			margin-top: 20px;
			font-size: 16px;
			display: block;
		}
		#errorMsg{
			color: #f00;
			font-size: 16px;
		}
	</style>
</head>
<body>
<div class="wrap">
	<div class="userinfo">
		<div class="userface"><img src="../resources/images/userImg/${userinfo.userImg}" alt="userface" id="preview"></div>
		<form action="upload" method="post" id="userinfoBox" enctype="multipart/form-data" onsubmit="return checkfile(this)">
			<ul class="myul">
				<li id="errorMsg">${fileMsg}</li>
				<li><h2>只能上传单张1M以下的 PNG、JPG、GIF 格式的图片</h2></li>
				<li><span class="upload">上传头像：</span><input type="file" name="file" id="img"></li>
				<li><input type="submit" name="submit" value="上传"  id="keep"/></li>
				<li><a href="/userinfo" class="backIndex">返回</a></li>
				<li><a href="/" class="backIndex">返回主页</a></li>
			</ul>
		</form>
	</div>
</div>
<script src="/resources/js/jquery-3.1.1.min.js"></script>
<script src="/resources/js/preview.js"></script>
<script src="/resources/js/upload.js"></script>

</body>
</html>